<template>
    <div id="register">
        <!--顶部-->
        <div id="head">
            <router-link to="/login" id="a"></router-link>
            <span>京东注册</span>
        </div>
        <!--手机号和验证-->
        <div id="PhoneVerification">
            <div>
                <div>
                    <label for="">
                        <span>+86</span>
                        <a href=""></a>
                    </label>
                    <input type="text" placeholder="请输入手机号">
                </div>
                <div>
                    <div id="validation">
                        <img src="../image/login/init.gif" alt="">
                        <span>点击完成验证</span>
                    </div>
                </div>
            </div>
        </div>
        <!--注册协议-->
        <div id="agreement">
            <div id="agreementBox">
                <p id="name">注册协议及隐私政策</p>
                <div id="line"></div>
                <div id="details">
                    <p id="names1">在您注册成为京东用户的过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，
                        <span>请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体并下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）：</span>
                    </p>
                    <p id="names2">
                        <a href="">《京东用户注册协议》</a>
                    </p>
                    <p id="names2">
                        <a href="">《京东隐私政策》</a>
                    </p>
                    <p id="names2">
                        <a href="">《订单共享与安全》</a>
                    </p>
                    <p id="names1">
                        <span>【请您注意】如果您不同意上述协议或其中任何条款约定，请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息、阅读并点击同意上述协议且完成全部注册流程后，即表示您已充分阅读、理解并接受协议的全部内容；并表明您也同意京东可以依据以上的隐私政策内容来处理您的个人信息。</span>如您对以上协议内容有任何疑问，您可随时与京东客服联系。                        
                    </p>
                </div>
                <div id="btn">
                    <p>
                        <span>点击同意即表示您已阅读并同意
                            <a href="">《京东用户注册协议》</a>与
                            <a href="">《京东隐私政策》</a>并将您的订单信息共享给为完成此订单所必须的第三方合作方。关于
                            <a href="">《订单共享与安全》</a>
                        </span>
                    </p>
                    <div>
                        <router-link to="/login" id="a">不同意</router-link>
                        <a href="">同意</a>
                    </div>
                </div>               
            </div>          
        </div>
    </div>
</template>
<script>
    export default {
        
    }
</script>
<style scoped lang="scss">
//注册页面
*{
    margin:0;
    padding:0;
    list-style-type:none;
    text-decoration:none;
}
//顶部
    #head{
        width:750px;
        height:88px;
        border-bottom:1px solid #bbb;
        position:relative;

        #a{
            display:block;
            width:20px;
            height:30px;
            //margin:30px 28px;
            background-image:url(../image/login/icon_arrow_down.png);
            background-repeat:no-repeat;
            background-size:100% 100%;
            color:#222;
            position:absolute;
            top:30px;
            left:35px;
        }
        //文字
        span{
            display:block;
            width:136px;
            height:38px;
            font-size:34px;
            position:absolute;
            top:28px;
            left:310px;
            color:#555;
        }
    }
//手机号和验证
    #PhoneVerification{
        width:690px;
        height:240px;
        padding:30px;

        div{
            width:690px;
            height:210px;
            
            //输入手机号
            div:nth-of-type(1){
                width:670px;
                height:90px;
                padding:0 10px;
                margin-top:30px;
                display:flex;
                border:1px solid #ddd;

                label{
                    width:124px;
                    height:90px;
                    display:block;
                    font-size:26px;
                    color:#333;
                    text-align:center;
                    line-height:90px;
                    display:flex;
                    
                    //区号
                    span:nth-of-type(1){
                        margin-left:30px;
                    }
                    //箭头
                    a{
                        width:0;
                        height:0;
                        border-left:10px solid transparent;
                        border-right:10px solid transparent;
                        border-top:10px solid #ababab;
                        display:block;
                        margin:40px 0 0 10px;
                    }
                }
                //输入框
                input{
                    width:490px;
                    height:38px;
                    display:block;
                    margin-top:25px;
                    font-size:30px;
                    line-height:38px;
                    border:none;
                    outline:none;
                }
                input::-webkit-input-placeholder{
                    color:#ccc;
                }
                input::-moz-placeholder{   /* Mozilla Firefox 19+ */
                    color:#ccc;
                }
                input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
                    color:#ccc;
                }
                input:-ms-input-placeholder{  /* Internet Explorer 10-11 */ 
                    color:#ccc;
                }
            }
            //验证
            div:nth-of-type(2){
                width:690px;
                height:90px;
                margin-top:30px;

                #validation{
                    width:686px;
                    height:86px;
                    border:1px solid #409eff;
                    padding:0;

                    img{
                        width:44px;
                        height:44px;
                        padding:0 18px;
                        margin-top:21px;
                    }
                    span{
                        font-size:30px;
                        color:#409eff;
                        line-height:86px;
                    }
                }
            }
        }
    }
//注册协议
    #agreement{
        width:750px;
        height:1334px;
        position:fixed;
        top:0;
        background-color:rgba(0,0,0,0.5);

        //注册协议
        #agreementBox{
            width:710px;
            height:734px;
            padding:0 20px;
            background-color:#fff;
            position:absolute;
            bottom:0;
            border-radius:5px 5px 0 0;
            

            //抬头
            #name{
                width:710px;
                height:54px;
                padding:26px 0;
                text-align:center;
                line-height:54px;
                font-size:38px;
                font-weight:700;

            }
            //线
            #line{
                width:738px;
                border-top:2px solid #ddd;
            }
            //详情
            #details{
                width:710px;
                height:356px;
                padding-top:26px;
                overflow-y: scroll;
                overflow-x: hidden;

                //一大段的文字
                #names1{
                   width:710px;
                   height:180px;
                   font-size:26px;
                   color:#000;
                   line-height:36px;

                   span{
                       font-weight:700;
                       text-decoration:underline;
                   }
                }
                //三个标题
                #names2{
                    width:710px;
                    height:36px;
                    a{
                        font-size:26px;
                        color:#000;
                    }
                }
                p:nth-of-type(2){
                    margin-top:20px;
                }
                p:nth-of-type(4){
                    margin-bottom:20px;
                }
                //再是一大段文字
                #p:nth-of-type(5){
                    width:710px;
                    height:252px;

                }
            }
            //按钮
            #btn{
                width:710px;
                height:244px;
                margin:auto;

                //文字
                p{
                    width:700px;
                    height:114px;
                    padding:20px 10px 0 0;
                    line-height:35px;
                    
                    span{
                        font-size:26px;
                        color:#000;
                        font-weight:700;

                        a{
                            color:#e93b3d;
                            text-decoration:underline;
                        }
                    }
                }
                //按钮
                div{
                    width:710px;
                    height:110px;
                    margin:auto;
                    display:flex;
                    justify-content:space-around;

                    #a{
                        display:block;
                        width:284px;
                        height:78px;                        
                        margin-top:15px;
                        border-radius:5px;
                        font-size:36px;
                        text-align:center;
                        line-height:78px;
                        border:1px solid #999;
                        color:#000;
                    }
                    a{
                        display:block;
                        width:284px;
                        height:78px;                        
                        margin-top:15px;
                        border-radius:5px;
                        font-size:36px;
                        text-align:center;
                        line-height:78px;
                        background-color:#e93b3d;
                        color:#fff;
                    }
                }
            }
        }
    }
</style>


